@extends('admin.mainlayout')
@section('title')
    <div class="title"><span>分类列表></span></div>
    <div class="header" id="a" style="
        width: 90px;
        text-align: center;
        background: #36bc9b;
        padding: 8px 0;
        color: white;
        cursor: pointer;
    "><a href="{{urlAdmin('Category','getAdd')}}" style="color: white;">添加分类</a>
    </div>
    <br/>
    <style type="text/css">
        #sousuo{
            display:inline-block;
            background: #347c1e;
            text-align: center;
            color:white;
            height:25px;
            width:40px;
            margin-left: 40px;
            cursor: pointer;
        }
        #sousuo:hover{
            background-color: #2d94e8;
        }

        #tuijian:link {color: #FF0000}		/* 未访问的链接 */
        #tuijian:visited {color: #00FF00}	/* 已访问的链接 */
        #tuijian:hover {color: #FF00FF;cursor: pointer}	    /* 鼠标移动到链接上 */
        #tuijian:active {color: #0000FF}	/* 选定的链接 */

        #quxiaotuijian:link {color: #FF0000}		/* 未访问的链接 */
        #quxiaotuijian:visited {color: #00FF00}	/* 已访问的链接 */
        #quxiaotuijian:hover {color: #FF00FF;cursor: pointer}	    /* 鼠标移动到链接上 */
        #quxiaotuijian:active {color: #0000FF}	/* 选定的链接 */

        #xiugai:hover{
            color: #FF00FF;
        }
        #shanchu:hover{
            color: #FF00FF;
        }
        #quxiaotuijian{
            color: red;
        }

    </style>
    <script>

        /********所有ajax加载效果**********/
        $(document).ajaxStart(function(){

            //加载效果
            layer.load(2, {shade: false});

        }).ajaxStop(function(){

            //关闭加载效果
            layer.closeAll("loading");
        });
        /********所有ajax加载效果**********/
        //取消显示
        function tuijian(id){

            layer.confirm('确定要修改吗?',{btn:['确定','取消']},function(){
                layer.closeAll();
                $.ajax({
                    type:'post',
                    url:"{{urlAdmin('Category','postChange')}}",
                    data:{id:id,show:0},
                    dataType:'json',
                    success:function(res){

                        if(res['status']==1){

                            layer.msg(res.msg,{icon:6});
                            setTimeout("location.reload()",1500);

                        }else{

                            layer.msg(res.msg,{icon:5});

                        }

                    }
                });

            },function(){


            });

        }

        //显示
        function quxiaotuijian(id){

            layer.confirm('确定要修改吗?',{btn:['确定','取消']},function(){
                layer.closeAll();
                $.ajax({
                    type:'post',
                    url:"{{urlAdmin('Category','postChange')}}",
                    data:{id:id,show:1},
                    dataType:'json',
                    success:function(res){

                        if(res['status']==1){

                            layer.msg(res.msg,{icon:6});
                            setTimeout("location.reload()",1500);

                        }else{

                            layer.msg(res.msg,{icon:5});

                        }

                    }
                });

            },function(){


            });

        }

        //删除
        function shanchu(id){

            layer.confirm('确定要删除该分类吗?',{btn:['确定','取消']},function(){
                layer.closeAll();
                $.ajax({
                    type:'get',
                    url:"{{urlAdmin('Category','getDel')}}",
                    data:{id:id},
                    dataType:'json',
                    success:function(res){

                        if(res['status']==1){

                            layer.msg(res.msg,{icon:6});
                            setTimeout("location.reload()",1500);

                        }else{

                            layer.msg(res.msg,{icon:5});

                        }

                    }
                });

            },function(){


            });

        }


    </script>
@endsection
@section('content')
<!-- 分类列表列表-->
    <div class="two">

        <table>
            <thead>
            <tr>
                <th width="10%">分类id</th>
                <th width="40%" style="text-align: center">分类名称</th>
                <th width="20%">排序</th>
                <th width="10%">是否显示</th>
                <th width="20%">操作</th>
            </tr>
            </thead>
            <tbody>
            @foreach($rows as $v)
            <tr>
                <td>{{$v['id']}}</td>
                <td style="text-align: center" >{{$v['prefix']}}{{$v['name']}}</td>
                <td>
                    <span class="old">{{$v['sort']}}</span>
                    <span class="new" style="display: none;"><input class='paixu' type="text" name="sort" value="{{$v['sort']}}"></span>
                </td>
                @if($v['show']==1)
                    <td><a id='tuijian' onclick="tuijian({{$v['id']}});" >是</a></td>
                @else
                    <td><a id='quxiaotuijian' onclick="quxiaotuijian({{$v['id']}});" >否</a></td>
                @endif
                <td><a id='xiugai' href="{{urlAdmin('Category','getEdit',array('id'=>$v['id']))}}">修改</a>

                <a id='shanchu' onclick="shanchu({{$v['id']}});" href="#">删除</a></td>
            </tr>
            @endforeach
            </tbody>
        </table>

    </div>

    <script>
//        $('.old').click(function(){
//            $(this).hide();
//            $(this).next().show();
//           // $(this).next()[0].focus();
//        });
//
//        $('.paixu').blur(function(){
//            $(this).hide();
//            $(this).parent().prev().show();
//        });


        //时间搜索
        var oSousuo = document.getElementById('sousuo');
        var oSearch = document.getElementById('search');

        oSousuo.onclick = function(){
            //加载效果
            layer.load(2, {shade: false});
            oSearch.submit();

        }

        laydate({
            elem: '#hello2'
        });
        laydate({
            elem: '#hello3'
        });
    </script>
@endsection